<template>
  <view class="b-box " :class="[mode]">
    <view class="b-box__left">
      <slot name="left"></slot>
    </view>
    <view class="b-box__right" :style="{marginLeft:gap}">
      <slot name="rightTop"></slot>
      <slot name="rightBottom"></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'b-box',
    props: {
      mode: {
        type: String, default: 'around',
      },
      gap: {
        type: String, default: '10rpx',
      },
    },
  };
</script>

<style lang="scss" scoped>
  @mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
  }

  .around {
    .b-box__right {
      justify-content: space-around;
    }
  }

  .between {
    .b-box__right {
      justify-content: space-between;
    }
  }
  .start {
    .b-box__right {
      justify-content: flex-start;
    }
  }

  .b-box {
    /* #ifndef APP-NVUE */
    /* #endif */
    @include flex();
    flex: 1;

    &__left {
      @include flex();
      justify-content: center;
      align-items: center;
      flex: 0 1 auto;
    }

    &__right {
      @include flex();
      flex-direction: column;
      align-items: flex-start;
      flex: 1;
    }
  }
</style>
